<template>
  <Layout>
    <Title title="经营情况表"></Title>

    <div class="select-time-range">
      <span>请选择一个时间段： </span>
    </div>

    <div>
      <el-date-picker
          class="select-time-range"
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '00:00:00']">
      </el-date-picker>
    </div>


    <div class="button">
      <el-button
          class="search"
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="getData()"
      >
        查询
      </el-button>
    </div>

    <el-button @click="exportAsExcel">导出Excel</el-button>

    <div class="body">
      <el-table
          :data="filteredData"
          stripe
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
      >
        <el-table-column
            prop="saleIn"
            label="销售收入"
            width="170">
        </el-table-column>
        <el-table-column
            prop="goodIn"
            label="商品类收入"
            width="170">
        </el-table-column>
        <el-table-column
            label=""
            width="100">
        </el-table-column>
        <el-table-column
            prop="saleCost"
            label="销售成本"
            width="170">
        </el-table-column>
        <el-table-column
            prop="goodCost"
            label="商品类支出"
            width="170">
        </el-table-column>
        <el-table-column
            prop="manCost"
            label="人力成本"
            width="170">
        </el-table-column>
        <el-table-column
            prop="allowance"
            label="折让"
            width="170">
        </el-table-column>
        <el-table-column
            label=""
            width="100">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="In1"-->
<!--            label="折让后收入"-->
<!--            width="150">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            prop="Out1"-->
<!--            label="总支出"-->
<!--            width="150">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="profit"
            label="总利润"
            width="170">
        </el-table-column>
      </el-table>
    </div>


  </Layout>
</template>

<script>
import Layout from "@/components/content/Layout";
import Title from "@/components/content/Title";
import {formatDate} from "@/common/utils";


import * as XLSX from "xlsx";
import {getBusinessCondition} from "@/network/sale";



export default {
  components: {
    Layout,
    Title
  },
  data() {
    return {
      date : '',
      filteredData: [],


      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            end.setTime(end.getTime());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            end.setTime(end.getTime());
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  async mounted() {
  },
  computed: {
    beginDate: function () {
      return this.date === null ? null : formatDate(this.date[0])
    },
    endDate: function () {
      return this.date === null ? null : formatDate(this.date[1])
    },

  },
  methods: {
    exportAsExcel(){
      const data = XLSX.utils.json_to_sheet(this.filteredData);
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, data, 'data');
      XLSX.writeFile(wb,'ExportExcel.xlsx');
      alert("导出成功");
    },



    getData() {
      if (this.date === '' || this.beginDate === null || this.endDate === null) {
        this.$message.error('请选择时间段');
        return
      }
      const config = {
        params: {
          beginDateStr: this.beginDate,
          endDateStr: this.endDate,
        }
      }
      getBusinessCondition(config).then(res => {
        if (res.code === '00000'){
          this.$message.success('查询成功')

          this.data = [];
          this.data = this.data.concat(res.result);
          this.filteredData = this.data;
          console.log("111111111111")
          console.log(this.filteredData)
          console.log("2222222222222")

        }else {
          this.$message.error('该时间段内无数据');
        }

      })


    },
  }
};
</script>

<style scoped lang="scss">
.select-sale-man, .select-time-range, .search, .customer-table, .max-amount, .select-client ,.select-commodity{
  margin: 1rem 1rem 1rem 1rem;
}

.export-excel-wrapper {
  margin: 1rem 1rem 1rem 1rem;
}
.input-user{
  margin: 1rem 1rem 1rem 1rem;
  width: 13rem;
}
.detail-table {
  margin: 1rem 1rem 1rem 1rem;
  border-radius: 4px;
}

.button {
  display: inline-block;
}

.body {
  margin: 0 auto;
  margin-top: 10px;
  height: 80vh;
  overflow-y: auto;
  width: 100%;
  background: rgba($color: #fff, $alpha: 0.5);
}
</style>
